<template>
    <div>
    <el-dialog
    title="轮播图设置（用于业主小程序首页）"
    custom-class="villageRotationMap"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    :visible.sync="visible"
    v-if="visible"
    :destroy-on-close="true"
    width="738px">
        <el-upload
        :action="action"
        :headers="headers"
        list-type="picture-card"
        class="upload-demo"
        :limit="4"
        accept=".jpeg,.png,.jpg"
        :file-list="filelist"
        :disabled="filelist.length >= 4"
        :on-success="uploadSuccess"
        :before-upload="beforeAvatarUpload"
        :on-preview="handlePictureCardPreview">
            <i slot="default" class="el-icon-plus fontSize14">
                <br><span style="font-size: 14px;color: rgba(0, 0, 0, 0.65);display: inline-block;margin:15px 0 10px 0">上传图片</span><br>
                <span style="font-size: 14px;color: rgba(0, 0, 0, 0.65);display: inline-block">大小不超过2M</span></i>
            <div slot="file" slot-scope="{file}">
            <el-image style="width: 160px;height: 120px;" :src="file.url" fit="cover"></el-image>
            <span class="el-upload-list__item-actions">
                <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
                >
                <i class="el-icon-zoom-in"></i>
                </span>
                <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
                >
                <i class="el-icon-delete" v-if="filelist.length > 1"></i>
                </span>
            </span>
            </div>
        </el-upload>
        <div class="color045 fontSize14 lengManx">*最多上传4张图片</div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    </div>

</template>
<script>
  import {uploadFile} from "src/api/activity"
  import {addBanner,delBanner,queryBanner} from "src/api/resources"
  import {getToken} from 'src/utils/auth'
  export default {
    name: "BannerSet",
    props:{
        
    },
    created(){
        
    },
    data() {
      return {
        // centerDialogVisible: false
        visible: false,
        villageId:null,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        file:new FormData(),
        filelist:[],
          list:[],
        fileListLeg:0,
          action:"",
          headers:{
              RdAuthorization: getToken()
          }
      };
    },
      mounted(){
          this.action = this.$baseApi + "/file/upload"
      },
    methods:{
        onChange(file,fileList){
            this.fileListLeg = fileList.length;
        },
        onRemove(file,fileList){
            this.fileListLeg = fileList.length;
        },
        beforeUpload(file){
            this.file.append('file',file)
        },
        upFile(file,fileList){
            uploadFile(this.file).then(response=>{
                this.addBanner(response.data)
            })
        },
        addBanner(url,file){
            let data = {url:url,villageId:this.villageId};
            addBanner(data).then(response=>{
                if(response.data){
                    file.raw.id =response.data.id;
                }
            })

        },
        show(id){
            this.villageId = id;
            this.filelist = [];
            this.queryBanner(id);
            this.visible = true
        },
        queryBanner(villageId){
            queryBanner({villageId:villageId}).then(response=>{
                if(response.code = 20000){
                    this.list = [...response.data.records]
                    this.filelist = this.list
                }
            });
        },
        handleRemove(file) {
            delBanner({id:file.id ? file.id : file.raw.id}).then(response=>{
                if(response.code=20000){
                    let index;
                    for(let i=0;i<this.filelist.length;i++){
                        let f = this.filelist[i]
                        if(f.uid == file.uid){
                            index = i;
                            break;
                        }
                    }
                    if(index || index === 0){
                        this.filelist.splice(index,1)
                    }
                }
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        uploadSuccess(response,file, fileList){
            this.addBanner(response.data,file);
            this.list.push(file);
            // this.$set(this,"fileList",this.list)

        }

    }
  };
</script>
<style lang="scss">
    .villageRotationMap{
        .el-dialog__header{
            padding: 15px 25px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            .el-dialog__title{
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.85);
            }
        }
        .el-dialog__body{
            padding: 20px 0 0 0;
            ul{
                li{
                    width: 160px;
                    height: 120px;
                }
            }
            .upload-demo{
                padding-left: 25px;
                padding-right: 25px;
            }
            .lengManx{
                padding: 16px 25px 15px 25px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            }
            .el-upload{
                width: 160px;
                height: 120px;
                line-height: 120px;
                background: rgba(0, 0, 0, 0.04);
                overflow: hidden;
                .el-icon-plus{
                    font-size: 22px !important;
                    margin-top: 20px;
                }
            }
        }
    }
</style>